<template>
<el-container>
  <el-header>
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-select v-model="find_value" placeholder="请选择">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
        </el-option>
      </el-select>
      <el-form-item label="搜索：">
        <el-input size="small" v-model="find_p" :placeholder='"请输入"+find_value' type="email"></el-input>
      </el-form-item>
      
      
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-header>
  <el-main>
  <el-container>
    <el-card   shadow="hover" style="margin-left:400px;margin-top:50px;margin-bottom:16px">
            <div class="demo-basic--circle">
              <el-avatar
                  :size="90"
                  :src="circleUrl"
                ></el-avatar>
            </div>
            <div class="block" style="margin-left:0px">
                <span>{{username}}</span>
            </div>
          <el-card class="box-card1" shadow="never" style="margin-left:0px;margin-top:8px">  
          <el-form style="margin-top:10px">
            <el-form-item label="用户角色" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="status"
                >
              </el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="mail"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="手机号" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="phonenumber"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-button @click="modify">确定</el-button>
          </el-form>
          </el-card>
    </el-card>
  </el-container>
  </el-main>
</el-container>
</template>

<script>
import search from '../../components/search.vue'
export default {
  components: { search},
  data(){
    return{
      res:'',
      username:'',
      mail: '',
      phonenumber: '',
      status:'',
      circleUrl:
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      formInline: {
            username:'',
            mail:'',
            phonenumber:''
        },
        options:[
            {
                value:'username',
                label:'用户名'
            },{
                value:'mail',
                label:'邮箱'
            },{
                value:'phonenumber',
                label:'手机号'
            }
        ],
        
        find_value:'',
        find_p:'',
    }
  },
  created:function(){ 
    this.username=localStorage.getItem('username')
    this.mail=localStorage.getItem('mail')
    this.phonenumber=localStorage.getItem('phonenumber')
    this.status=localStorage.getItem('status')

    if(this.status=='0'){
        this.status='普通用户'
      }else if(this.status=='1'){
        this.status='管理员'
      }else if(this.status=='2'){
        this.status='超级管理员'
      }
  },
  methods:{
    search(){
      var that=this
        var flag=false
        const mailrule=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
        const phonenumberrule=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        // if(this.find_value=="username") this.formInline.username=this.find_p
        // else if(this.find_value=="mail")this.formInline.mail=this.find_p
        // else if(this.find_value=="phonenumber")this.formInline.phonenumber=this.find_p
       if(this.find_value=="mail"){
           if(!mailrule.test(this.find_p)){
               this.$message.error("邮箱格式不正确，请重新输入！")
           }else{flag=true}
       }else if(this.find_value=="phonenumber"){
           if(!phonenumberrule.test(this.find_p)){
               this.$message.error("手机号格式不正确，请重新输入！")
           }else{flag=true}
       }
       if(flag){ 
        var param=this.find_value
        this.$axios.get('/api/user/finduser',{
            params:{
                param_name:param,
                param:this.find_p
        }
        }).then(res=>{
            console.log(this.find_p)
            console.log(res)

            //传递值
            that.username=res.data.username
            that.mail=res.data.mail
            that.phonenumber=res.data.phonenumber
            if(res.data.status=='0'){
              that.status='普通用户'
            }else if(res.data.status=='1'){
              that.status='管理员'
            }else if(res.data.status=='2'){
              that.status='超级管理员'
            }

            if(res.data.username=="无"){
                this.$message.error("该用户不存在，请检查您的输入信息")
                console.log("返回结果为空")
            }
            
        })
       }
       console.log("333333333333")
       console.log(that.status)
       
    },
    modify(){
      var temp=null
      console.log(this.status)
      console.log(this.username)
      if(this.status=='超级管理员'){
        temp='2'
        this.$axios.get('/api/user/modifys',{
            params:{
                username:this.username,
                status:temp,
        }
        }).then(res=>{
            console.log(res)
            this.$message({
      message: '修改成功！',
      type: 'success'
    })
            })
      }
      else if(this.status=='管理员'){
        temp='1'
        this.$axios.get('/api/user/modifys',{
            params:{
                username:this.username,
                status:temp,
        }
        }).then(res=>{
            console.log(res)
            this.$message({
      message: '修改成功！',
      type: 'success'
    })
            
            
            }
            
            )}
      else if(this.status=='普通用户'){
        temp='0'
        this.$axios.get('/api/user/modifys',{
            params:{
                username:this.username,
                status:temp,
        }
        }).then(res=>{
            console.log(res)
            this.$message({
      message: '修改成功！',
      type: 'success'
    })
            })}
      else{
        this.$message.error("格式错误,请从'超级管理员','管理员','普通用户'中选择填写!")
      }
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>